<template>
  <div>
    <a-row>
      <a-col :span="24">
        已成单600个合同。
        <a-button size="small" type="primary" ghost @click="$router.push({ path: '/calls' })">详情</a-button>
      </a-col>
      <a-col :span="24">
        <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
          <v-tooltip />
          <v-axis dataKey="type" :label="label" :tickLine="tickLine"></v-axis>
          <v-axis dataKey="value" :label="labelFormat" :title="title"></v-axis>
          <v-interval position="type*value" color="cat" :opcaity="1"></v-interval>
          <v-guide
            type="text"
            :top="true"
            :position="pos1"
            content="商标"
            :style="style"
            :offsetY="40"
          />
          <v-guide
            type="text"
            :top="true"
            :position="pos2"
            content="版权"
            :style="style"
            :offsetY="40"
          />
          <v-guide
            type="text"
            :top="true"
            :position="pos3"
            content="专利"
            :style="style"
            :offsetY="40"
            :offsetX="20"
          />
          <v-guide
            type="line"
            :start="start1"
            :end="end1"
            :lineStyle="lineStyle"
          />
          <v-guide
            type="line"
            :start="start2"
            :end="end2"
            :lineStyle="lineStyle"
          />
        </v-chart>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const data = [{
  type: '咨询1',
  value: 48000,
  cat: '商标'
}, {
  type: '咨询2',
  value: 36000,
  cat: '商标'
}, {
  type: '咨询3',
  value: 9000,
  cat: '商标'
}, {
  type: '咨询4',
  value: 30500,
  cat: '版权'
}, {
  type: '咨询5',
  value: 22000,
  cat: '版权'
}, {
  type: '咨询6',
  value: 12000,
  cat: '版权'
}, {
  type: '咨询7',
  value: 25000,
  cat: '专利'
}, {
  type: '咨询8',
  value: 17000,
  cat: '专利'
}, {
  type: '咨询9',
  value: 8000,
  cat: '专利'
}, {
  type: '咨询10',
  value: 2000,
  cat: '专利'
}]

const scale = [{
  dataKey: 'value',
  alias: '占比（%）'
}]

const label = {
  textStyle: {
    fill: '#aaaaaa'
  }
}

const tickLine = {
  alignWithLabel: false,
  length: 0
}

const labelFormat = {
  textStyle: {
    fill: '#aaaaaa'
  },
  formatter: function formatter (text) {
    return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  }
}

const title = {
  offset: 70
}

const lineStyle = {
  stroke: '#d9d9d9',
  lineDash: [0, 0]
}

const style = {
  fill: '#c0c0c0',
  fontSize: 12,
  fontWeight: '300',
  textAlign: 'center'
}
export default {
  name: 'Business',
  data () {
    return {
      data,
      scale,
      height: 400,
      style,
      label,
      tickLine,
      labelFormat,
      title,
      lineStyle,
      pos1: ['椅子', 'min'],
      pos2: ['电话', 'min'],
      pos3: ['笔', 'min'],
      start1: ['30%', '100%'],
      end1: ['30%', '120%'],
      start2: ['60%', '100%'],
      end2: ['60%', '120%']
    }
  }
}
</script>

<style scoped>

</style>
